import React, { Component,Suspense } from 'react';
import { Route,Redirect,Switch } from 'react-router-dom'

//RouterView的作用: 通过routes属性接收路由配置信息,遍历路由配置信息动态生成路由规则
class RouterView extends Component {
    render() {
        return (
            <Suspense fallback={<div className='loading'>loading...</div>}>
                <Switch>
                    {/* 将路由配置信息转换成路由规则 */}
                    {
                        this.props.routes.map((route,index)=>{
                            if( route.path != '*' && route.component ){ //正常的路由
                                // return <Route key={index} path={route.path} component={route.component}></Route>

                                //通过render渲染的组件,是个全新的组件,如果组件内想要使用history,location,match三个路由对象,则需要手动传入到组件内部
                                return <Route key={index} path={route.path} render={(props)=>{
                                    return <route.component {...props} routes={route.children} ></route.component>
                                }}></Route>
                            }else if( route.redirect ){ //重定向
                                return <Redirect key={index} exact from={route.from} to={route.to} ></Redirect>
                            }else{  //其他路由  
                                return <Route key={index} path={route.path} component={route.component}></Route>
                            }
                        })
                    }
                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;